<template>
  <div class="mpd-title-bar display-flex">
    <div class="menu-bar display-flex flex-direction-row not-select">
      <a-dropdown
        v-for="(item, index) in menus"
        :key="'title-bar-menu-' + index"
        :getPopupContainer="getPopupContainer"
      >
        <div class="menu-bar-menu-button">
          {{ item.title }}
        </div>
        <template #overlay>
          <a-menu
            v-if="item.children && item.children.length > 0"
            @click="obj => menuClickHandle(item, obj)"
            class="mpd-menu"
            theme="dark"
          >
            <a-menu-item class="mpd-menu-item" v-for="(menuItem, menuIndex) in item.children" :key="menuIndex">
              <div class="display-flex" style="min-width: 200px">
                <div class="flex-size-auto">{{ menuItem.title }}</div>
                <div>{{ menuItem.info }}</div>
              </div>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
    <div class="window-title flex-size-auto">
      <span>{{ mpdPageConfig.title }}</span>
      <span>&nbsp;-&nbsp;</span>
      <span>Magic&nbsp;Page&nbsp;Designer</span>
    </div>
  </div>
</template>

<script>
import setting from '@/store/setting'
import clipboardCopy from 'clipboard-copy'
import { optimizeMpdPageConfig } from '@/util/pageUtil'
import _ from 'lodash'

export default {
  inject: ['mpdPageConfig', 'mpdContainer'],
  data() {
    return {
      menus: [
        {
          title: '文件',
          children: [
            {
              title: '触发保存事件(优化json结构)',
              onClick: () => {
                this.$emit('mpdSave', true)
                this.$mpdMessage.success('已触发保存事件(优化json结构)')
              }
            },
            {
              title: '触发保存事件',
              onClick: () => {
                this.$emit('mpdSave', false)
                this.$mpdMessage.success('已触发保存事件')
              }
            },
            {
              title: '复制到剪贴板(优化json结构)',
              onClick: () => {
                this.clipboardCopyHandle(true)
              }
            },
            {
              title: '复制到剪贴板',
              onClick: () => {
                this.clipboardCopyHandle(false)
              }
            }
          ]
        },
        {
          title: '编辑器',
          children: [
            {
              title: '重新渲染页面',
              onClick: () => {
                setting.reloadCanvasFun()
              }
            },
            {
              title: '显示\\隐藏辅助线',
              onClick: () => {
                setting.showPageDomSubline = !setting.showPageDomSubline
              }
            },
            {
              title: '切换编辑\\预览模式',
              onClick: () => {
                setting.isPreviewMode = !setting.isPreviewMode
              }
            }
          ]
        }
      ]
    }
  },
  methods: {
    // 单击菜单处理
    menuClickHandle(item, obj) {
      if (item.children[obj.key].onClick) {
        item.children[obj.key].onClick(item.children[obj.key], obj)
      }
    },
    getPopupContainer() {
      return this.mpdContainer()
    },
    // 复制到剪贴板
    clipboardCopyHandle(optimize) {
      const mpdPageConfigTmp = _.cloneDeep(this.mpdPageConfig)
      // 是否优化json结构
      if (optimize !== false) {
        optimizeMpdPageConfig(mpdPageConfigTmp)
      }
      clipboardCopy(JSON.stringify(mpdPageConfigTmp))
        .then(() => {
          this.$mpdMessage.success('已复制到剪贴板')
        })
        .catch(error => {
          console.error(error)
          this.$mpdMessage.error('复制到剪贴板失败，详情原因请查看console')
        })
    }
  }
}
</script>

<style lang="less">
.mpd-title-bar {
  color: var(--mpd-global-font-color);
  background: var(--mpd-title-bar-bg-color);
  min-height: 30px;
  font-size: var(--mpd-global-font-size);
  align-items: center;

  .menu-bar {
    .menu-bar-menu-button {
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      cursor: pointer;
    }

    .menu-bar-menu-button:hover {
      background-color: var(--mpd-title-bar-menu-button-hover-bg-color);
    }
  }
  .window-title {
    text-align: center;
  }
}
.mpd-menu {
  &.ant-dropdown-menu-dark {
    & {
      background: var(--mpd-contextmenu-bg-color);
    }
    .mpd-menu-item:hover {
      background: var(--mpd-contextmenu-hover-bg-color);
    }
    .mpd-menu-item .ant-dropdown-menu-submenu-arrow-icon,
    .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow-icon {
      color: var(--contextmenu-font-hover-color);
    }
  }
}
</style>
